<template>
       <div class="recommendPage">
          <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
            <swiper-slide v-for = "(item,index) in swiper_img"   :key = "index"><img :src="item.image_src" alt=""></swiper-slide>

            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
  
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {

  components: { swiper, swiperSlide },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  data() {
    return {
      // swiper_img: [
      //            'https://img0.baidu.com/it/u=3564444755,3599870531&fm=26&fmt=auto&gp=0.jpg' ,
      //            'https://img2.baidu.com/it/u=2471826223,1654648024&fm=26&fmt=auto&gp=0.jpg' ,
      //            'https://img1.baidu.com/it/u=204471953,2683458197&fm=26&fmt=auto&gp=0.jpg' ,
      //            'https://img0.baidu.com/it/u=1913157572,241559701&fm=26&fmt=auto&gp=0.jpg' ,
      //            'https://img2.baidu.com/it/u=3298885809,1065062598&fm=26&fmt=auto&gp=0.jpg' ,
      //       ]  ,
      swiperOption: {
        loop: false,  // 是否循环轮播
        autoplay: true,  // 是否可以自动轮播
        slidesPerView: 1,  // 可是区域内可展示多少个块
        spaceBetween: 30,  // 块之间间隔距离
        initialSlide:0,  // 默认初始显示块
        freeMode: false,
        // 显示分页
        pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
	}
  
},
  props:{
    swiper_img:{
      type:Array
    }
  }

}
</script>

<style>
.recommendPage .swiper-container {
  position: relative;
  width: 750px;
  /* height: 200px; */
}
.recommendPage .swiper-container .swiper-slide {
  width: 100%;
  /* line-height: 200px; */
  /* border:1px solid green; */
  color: #000;
  font-size: 16px;
  text-align: center;
}

.swiper-slide img {
  width: 100%;
}
 /* *{touch-action: none;} */
</style>